@charset "utf-8";

// $vars
//--------------------------------------------------------------------------
$color-primary: #333;           // 主要文字
$color-secondary: #666;         // 次要文字
$color-muted: #999;             // 减弱文字
$color-warning: #f33;           // 警告/错误
$color-info: #ff7300;           // 提示文字
$color-link: #6f55c0;           // 超链接
$color-link-hover: #6f55c0;     // 超链接-鼠标悬浮
$color-price: #6f55c0;          // 价格

$color-muted-title: #666;       // (历史设置，保留)
$color-muted-desc: #999;        // (历史设置，保留)


// @mixins
//--------------------------------------------------------------------------
@mixin css3($attr: transition, $val: ease-out .25s) {
	-webkit-#{$attr}: $val;
	   -moz-#{$attr}: $val;
		-ms-#{$attr}: $val;
		 -o-#{$attr}: $val;
		    #{$attr}: $val;
}

// 兼容IE8的透明度设置
@mixin opacity($opacity: 1) {
	opacity: $opacity;
	filter: alpha(opacity=$opacity / 100);
}


// 兼容IE的背景颜色透明设置
@mixin bgOpacity($color, $opacity){

    $color: rgba($color, $opacity);
    $iecolor: ie-hex-str($color); 
    
    background-color: $color;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{$iecolor}', endColorstr='#{$iecolor}');

    :root &{
    	filter: none;
    }
}

%anim {
	@include css3(transition, ease-out .25s);
}


// css画实心三角形
%triangle {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	content: " ";
}
@mixin triangle($direction: right, $width: 5px, $color: #ddd) {
	@if($direction == top) {
		$direction: bottom;
	}
	@else if($direction == right) {
		$direction: left;
	}
	@else if($direction == bottom) {
		$direction: top;
	}
	@else if($direction == left) {
		$direction: right;
	}

	@extend %triangle;
	border: $width solid transparent;
	border-#{$direction}-color: $color;
}


// css画三角形箭头
%arrow-basic {
    position: relative;
    display: inline-block;
}
%arrow-basic:before,
%arrow-basic:after { 
    content: ''; 
    position: absolute; 
    height: 0; 
    width: 0;
}
@mixin arrow-maker($direction: top, $width: 5px, $color: #A2A2A2, $size: 1px, $defaltColor: #fff){

    &{
        @extend %arrow-basic;     
    }

    @if($direction == top){

        &{
            width: $width * 2;
            height: $width;  
        }        
        &:before{
            top: -$width;
            left: 0;       
        }
        &:after{
            top: -$width + $size;
            left: 0;
        }
    }
    @else if($direction == bottom){

        &{
            width: $width * 2;
            height: $width;  
        }     
        &:before{
            top: 0;
            left: 0;
        }
        &:after{
            top: -$size;
            left: 0;
        }

    }
    @else if($direction == left){

        &{
            width: $width;
            height: $width * 2;  
        }     
        &:before{
            top: 0;
            left: -$width;
        }
        &:after{
            top: 0;
            left: -$width + $size;
        }

    }
    @else if($direction == right){

        &{
            width: $width;
            height: $width * 2;   
        }     
        &:before{
            top: 0;
            left: 0;
        }
        &:after{
            top: 0;
            left: -$size;
        }

    }

    $direction: reverseDirection($direction);

    &:before,
    &:after{
        border: $width solid transparent;
        border-#{$direction}-color: $color;
    }

    &:after{
        border-#{$direction}-color: $defaltColor;
    }
}



// functions
//--------------------------------------------------------------------------

// reverse the direction value
// left => right, right => left, top => bottom, bottom => top
@function reverseDirection($direction: left){
    @if($direction == left){
        @return right;
    }
    @if($direction == right){
        @return left;
    }
    @if($direction == top){
        @return bottom;
    }
    @if($direction == bottom){
        @return top;
    }
    @return $direction;
}

// 计算文本段落marginTop属性值（根据两段或者一段文字的字号和行高）
@function cacleMarginTop($topValue: 20, $size1: 36, $height1: 54, $size2: 24, $height2: 38){
    @return $topValue - ($height1 - $size1) / 2 - ($height2 - $size2) / 2;
}
@function cacleMarginTopSingle($topValue: 20, $size1: 36, $height1: 54){
    @return $topValue - ($height1 - $size1) / 2;
}



// %placeholders
//--------------------------------------------------------------------------
@mixin clearfix(){
    *zoom: 1;
    &:after{
        content: "";
        clear: both;
        display: block;
        height: 0;
    }
}
%clearfix{
    @include clearfix();
}

%hide {
	float: left;
	width: 0;
	height: 0;
	overflow: hidden;
}

%img-block {
	display: block;
	vertical-align: baseline;
}

%inline-block {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

%ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

%justify {
	text-align: justify;
	text-justify: inter-ideograph;
}

%center-block {
	margin-left: auto;
	margin-right: auto;
}

%middle-block-box {
	@extend %inline-block;

	position: relative;
	vertical-align: middle;
}

%middle-block {	
	display: inline-block;
	width: 1px;
	height: 1px;
	margin-left: -1px;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	*zoom: 1;
	*display: inline;
}


// 默认按钮/确认按钮
@mixin button-default(){
    border: none;
    background-color: #6f55c0;
    color: #fff;
    text-align: center;
    text-decoration: none;

    &:hover {
        text-decoration: none;
        background-color: #8032f5;
    }

    &.disabled {
        border: 1px solid #ddd;
        color: $color-muted;
        background-color: #f8f8f8;
        cursor: not-allowed;
    }
}
%button-default {
    @include button-default();
}


// 空心按钮
@mixin button-empty() {
    border: 1px solid #ddd;
    color: #666;
    text-align: center;
    text-decoration: none;

    &:hover{
        color: #6f55c0;
        border-color: #6f55c0;
        text-decoration: none;
    }

    &.disabled {
        border: 1px solid #ddd;
        color: $color-muted;
        background-color: #f8f8f8;
        cursor: not-allowed;
    }
}
%button-empty {
    @include button-empty();
}
